<template>
	<div id="nav">
		<h1>编程式导航</h1>
		<p>
			就是使用js进行跳转
		</p>
		<button @click="goAxios()">go Axios test page</button>
		<br>
		<button @click="goParamsPage()">Get 传参测试</button>
		<br>
		<button @click="goDynamic()">动态路由传参测试</button>
		<br>
		<button @click="goHistory()">返回上一步</button>
	</div>
</template>

<script>
	export default{
		methods:{
			goAxios(){
				//this.$router.push({path:"/axios"});
				this.$router.push({name:'axios'})
			},
			goHistory(){
				this.$router.go(-1);
			},
			goParamsPage(){
				//方式一
				this.$router.push({path:'/params/get',query:{'content':'testParam conatent'}})
				//方式二
				this.$router.push({name:'GetParam',query:{'content':'testParam conatent2'}})
				//方式三
				this.$router.push({path:'/params/get?content=testParam conatent3'})
			},
			goDynamic(){
				//方式一：
				//this.$router.push({path:'/params/dynamic/test DynamicSegment'})
				//方式二
				this.$router.push({name:'DynamicSegment',params:{ds:'test DynamicSegment/sdfs'}})
			}
		}
	}
</script>

<style>
	button{
		height: 30px;
		margin: 5px;
	}
</style>
